<template>
    <div class="tinymce-box">
        <Editor v-model="contentValue" :init="init" :disabled="disabled" />
    </div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import { upload } from "@/utils/http";

let props = defineProps({
    modelValue: {
        type: String,
        default: ''
    },
    disabled: {
        type: Boolean,
        default: false
    },
    plugins: {
        type: [String, Array],
        default: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern help paste emoticons autosave'
    },
    toolbar: {
        type: [String, Array],
        default: 'fullscreen undo redo restoredraft l table image media charmap hrpagebreak insertdatetime print preview I cut copy paste pastetext I forecolorbackcolor bold italic underline strikethrough link anchor  alignleft aliancenteralignright alignjustify outdent indent I styleselect formatselect fontselectfontsizeselect ! bullist numlist  blockguote subscript superscript removeformat lcode selectal] searchreplace visualblocks ] indent2em lineheight formatpainteraxupimgs'
    }
})

let emit = defineEmits(['update:modelValue'])

let init = {
    base_url: '/tinymce', //指定中文包
    language: "zh-Hans",
    skin_url: '/tinymce/skins/ui/oxide',//编辑器皮肤
    height: 500,//高度
    browser_spellcheck: true, // 拼写检查
    branding: false,
    elementpath: false,
    resize: false,
    plugins: props.plugins,
    toolbar: props.toolbar,
    paste_data_images: true, // 允许粘贴图像
    content_style: "img {max-width;100%;}", //接自定义的css样式
    lineheieht_formats: "8.5 0.8 1 12 1.5 1,75 2 2.5 3 4 5",
    fontsize_formats: "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px",
    font_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
    //自定义图片上传
    images_upload_handler: (blobInfo: { blob: () => string | Blob; }, sussess: any, failure: any) => {
        const formData = new FormData()
        formData.append('file', blobInfo.blob());
        upload(formData).then((res: any) => {
            sussess(res.url)
        }).catch((err) => {
            failure(err)
        })
    }
}

tinymce.init({})

let contentValue = computed({
    get() {
        return props.modelValue
    },
    set(value) {
        emit('update:modelValue', value)
    }
})




</script>